import React, { useState, useEffect } from "react";

// hooks是16.8版本开始加入的，只能给函数组件用
// 增强函数组件的功能（state和生命周期等等）
// 抽离功能代码，进行功能复用
// 相比于高阶组件不会让组件层间变深

// hooks都是函数，都必须在函数组件的顶层调用

// useState传入一个默认值，返回一个数组[变量，改变变量的方法]
// 改变数据的方法是异步的
const App = () => {
  const [count, setCount] = useState(10);
  // 函数组件加事件前面要加const
  const add = () => {
    // 改变变量的方法里面可以传入一个值或者一个函数
    // setCount(20);
    setCount((v) => v + 1);
    // console.log(count);
  };

  useEffect(() => {
    console.log(count);
  }, [count]);

  const [name, setName] = useState("zhangsan");
  // const fn2 = () => {
  //   setName("lisi");
  //   console.log(123);
  // };

  return (
    <>
      <h2>useState</h2>
      <p>count: {count}</p>
      <button onClick={add}>btn</button>

      <p>name: {name}</p>
      <button
        onClick={() => {
          setName("lisi");
          console.log(123);
        }}
      >
        btn2
      </button>
    </>
  );
};

export default App;
